import React from "react";
import { Dispatch } from "redux";
import { connect } from 'react-redux'
import { IFState } from '../../../store/reducer'
import { updateContent } from '../../../store/actionCreators'

type P = {
    content?: string;
    inputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

const CustomB = (props: P) => {
    const { content, inputChange } = props
    return (
        <div>
            <p>CustomB - store: {content}</p>
            <input type="text" value={content} onChange={inputChange} />
        </div>
    )
}

// 映射 state
const mapState = (state: IFState) => {
    return {
        content: state.content
    }
}
// 映射 props
const mapProps = (dispatch: Dispatch) => {
    return {
        inputChange(e: React.ChangeEvent<HTMLInputElement>) {
            const value = e.target.value
            dispatch(updateContent(value, 'B'))
        }
    }
}

export default connect(mapState, mapProps)(CustomB)